<template>
    <div class="chart-box" ref="chart"> </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
    name: "CaseTypes",
    data() {
        return {
            options: {
                title: {
                    text: '总数',
                    x: 'center',
                    y: '38%',
                    textStyle: {
                        fontSize: 14,
                        color: '#fff'
                    },
                    subtext: 123123,
                    subtextStyle: {
                        fontSize: 16,
                        color: '#fff'
                    },
                },
                tooltip: {
                    trigger: 'item'
                },
                series: [{
                    type: 'pie',
                    center: ['50%', '50%'],
                    radius: ['45%', '70%'],
                    label: {
                        show: true,
                        formatter: '{b}：{d}%({c}件)',
                        color: '#fff',
                        rich: {
                            align: 'right' // 文本右对齐
                        }
                    },
                    data: [{
                        'name': '民事',
                        'value': 5,
                        itemStyle: {
                            normal: {
                                color: 'rgb(221, 179 ,45)'
                            }
                        },
                    }, {
                        'name': '行政',
                        'value': 11,
                        itemStyle: {
                            normal: {
                                color: 'rgb(4 ,154 ,35)'
                            }
                        },
                    }, {
                        'name': '执行',
                        'value': 30,
                        itemStyle: {
                            normal: {
                                color: 'rgb(0 ,188 ,159)'
                            }
                        },
                    }, {
                        'name': '刑事',
                        'value': 100,
                        itemStyle: {
                            normal: {
                                color: 'rgb(21 ,106 ,234)'
                            }
                        },
                    }
                    ],
                }]
            }
        }
    },
    mounted() {
        setTimeout(() => {
            const chart = echarts.init(this.$refs.chart)
            chart.setOption(this.options)
        }, 0);
    }
}
</script>

<style lang="less" scoped>
.chart-box {
    height: 225px;
}
</style>